/**
 * Created by scenic on 2017/6/30.
 */

;(function (global, factory) {
    factory(global.Widget = {});
})(this, function (exports) {


    function createSlider(firstValue, minValue, maxValue, callback, davidValue) {
        davidValue = davidValue != undefined ? parseFloat(davidValue) : 1;

        var mainContainer = document.createElement("div");
        //input slider
        var mEditText = document.createElement("input")
        var slider = document.createElement("div");
        mainContainer.appendChild(mEditText);
        mainContainer.appendChild(slider);

        mEditText.setAttribute("type", "text");
        mEditText.style.width = "40%"
        mEditText.style.marginLeft = "30%";
        mEditText.value = firstValue;
        mEditText.onkeydown = function (event) {
            if (event.key == "Enter") {
                $(slider).slider("value", mEditText.value * davidValue);

                if (callback) {
                    callback(mEditText.value);
                }
            }
        }
        mEditText.onblur = function (event) {
            $(slider).slider("value", mEditText.value);
            if (callback) {
                callback(mEditText.value);
            }
        }

        slider.style.marginLeft = "10px"
        $(slider).slider({
            min: minValue,
            max: maxValue,
            value: firstValue * davidValue,
            slide: function (event, ui) {
                var value = ui.value / davidValue;

                $(mEditText)[0].value = value;
                if (callback) {
                    callback(value);
                }
            }
        });

        return mainContainer;
    }

    /**
     * 创建一个slider控件
     * @param title
     * @param uiUpdateCallback
     * @param config
     * @returns {Element}
     */
    function createTranslator(object) {
        var div = document.createElement("div");
        div.style.padding = "10px 10px 10px 10px"
        div.style.border = "1px solid rgb(0, 0, 0)"
        div.innerHTML = "<span>" + "基础移动" + "&nbsp" + "</span>"

        var positionX = createSlider(object.position.x, -1000, 1000, function (value) {
            object.position.x = parseFloat(value);
        })
        var positionY = createSlider(object.position.y, -1000, 1000, function (value) {
            object.position.y = parseFloat(value);
        })
        var positionZ = createSlider(object.position.z, -1000, 1000, function (value) {
            object.position.z = parseFloat(value);
        })
        div.appendChild(document.createTextNode("position"))
        div.appendChild(positionX);
        div.appendChild(positionY);
        div.appendChild(positionZ);


        var rotationX = createSlider(object.rotation.x * 180 / Math.PI, -360, 360, function (value) {
            object.rotation.x = parseFloat(value) * Math.PI / 180;
        })
        var rotationY = createSlider(object.rotation.y * 180 / Math.PI, -360, 360, function (value) {
            object.rotation.y = parseFloat(value) * Math.PI / 180;
        })
        var rotationZ = createSlider(object.rotation.z * 180 / Math.PI, -360, 360, function (value) {
            object.rotation.z = parseFloat(value) * Math.PI / 180;
        })
        div.appendChild(document.createTextNode("rotation"))
        div.appendChild(rotationX);
        div.appendChild(rotationY);
        div.appendChild(rotationZ);

        var scaleX = createSlider(object.scale.x, 1, 100, function (value) {
            object.scale.x = parseFloat(value);
        }, 100)
        var scaleY = createSlider(object.scale.y, 1, 100, function (value) {
            object.scale.y = parseFloat(value);
        }, 100)
        var scaleZ = createSlider(object.scale.z, 1, 100, function (value) {
            object.scale.z = parseFloat(value);
        }, 100)
        div.appendChild(document.createTextNode("scale"))
        div.appendChild(scaleX);
        div.appendChild(scaleY);
        div.appendChild(scaleZ);


        return div;
    }

    function createEditText(firstValue, callback) {
        //input slider
        var mEditText = document.createElement("input")
        mEditText.setAttribute("type", "text");
        mEditText.value = firstValue;
        mEditText.onkeydown = function (event) {
            if (event.key == "Enter") {
                if (callback) {
                    callback(mEditText.value);
                }
            }
        }
        mEditText.onblur = function (event) {
            if (callback) {
                callback(mEditText.value);
            }
        }

        return mEditText;
    }

    function createCheckBox(title, isChecked, callback) {
        var div = document.createElement('div');
        var input = document.createElement('input');
        input.value = "Visible"
        input.type = 'checkbox';

        var label = document.createElement('label');
        label.innerHTML = title;
        div.appendChild(label);
        div.appendChild(input);
        input.checked = isChecked;
        input.onclick = function () {
            if (callback)
                callback(input.checked);
        }
        return div;
    }

    function createCheckBoxRadio(title, optionArray, callback) {
        var inputArray = [];

        var div = document.createElement("div");
        var label = document.createElement('label');
        label.innerHTML = title + "<br/>";

        div.appendChild(label);

        var fieldSet = document.createElement("fieldset");
        div.appendChild(fieldSet);
        for (var i = 0; i < optionArray.length; i++) {
            var input = document.createElement("input")
            input.value = optionArray[i];
            input.type = 'checkbox';
            fieldSet.appendChild(document.createTextNode(optionArray[i]))
            fieldSet.appendChild(input);

            if (i == 0) {
                input.checked = true;
            }

            input.onclick = function (p1, p2) {
                inputArray.forEach(function (tmpInput) {
                    tmpInput.checked = false;
                })

                var target = p1.target;
                target.checked = true;
                callback.call(target, target.value);
            }

            inputArray.push(input);
        }


        return div;
    }


    exports.createTranslator = createTranslator;
    exports.createSlider = createSlider;
    exports.createEditText = createEditText;
    exports.createCheckBox = createCheckBox;
    exports.createCheckBoxRadio = createCheckBoxRadio;


});